import React, { ReactNode } from "react";
import {
  Modal as RNModal,
  View,
  TouchableOpacity,
  StyleSheet,
  Dimensions,
  Platform,
  KeyboardAvoidingView,
} from "react-native";
import { useTheme } from "@/contexts/ThemeContext";

interface ModalProps {
  visible: boolean;
  onClose: () => void;
  children: ReactNode;
  position?: "center" | "bottom" | "top";
  animationType?: "none" | "slide" | "fade";
  closeOnBackdropPress?: boolean;
  avoidKeyboard?: boolean;
  backdropOpacity?: number;
  contentStyle?: any;
}

/**
 * 自定义模态框组件
 *
 * 一个灵活的模态框组件，可以接受外部传来的结构进行渲染
 */
const Modal: React.FC<ModalProps> = ({
  visible,
  onClose,
  children,
  position = "center",
  animationType = "fade",
  closeOnBackdropPress = true,
  avoidKeyboard = true,
  backdropOpacity = 0.5,
  contentStyle,
}) => {
  const { colors } = useTheme();

  // 根据位置获取容器样式
  const getContainerStyle = () => {
    switch (position) {
      case "top":
        return styles.containerTop;
      case "bottom":
        return styles.containerBottom;
      default:
        return styles.containerCenter;
    }
  };

  // 根据位置获取内容样式
  const getContentStyle = () => {
    switch (position) {
      case "top":
        return [
          styles.content,
          styles.contentTop,
          {
            borderBottomLeftRadius: 16,
            borderBottomRightRadius: 16,
            backgroundColor: colors.card.background,
          },
          contentStyle,
        ];
      case "bottom":
        return [
          styles.content,
          styles.contentBottom,
          {
            borderTopLeftRadius: 16,
            borderTopRightRadius: 16,
            backgroundColor: colors.card.background,
          },
          contentStyle,
        ];
      default:
        return [
          styles.content,
          {
            borderRadius: 16,
            backgroundColor: colors.card.background,
          },
          contentStyle,
        ];
    }
  };

  // 渲染内容
  const renderContent = () => {
    const content = <View style={getContentStyle()}>{children}</View>;

    if (avoidKeyboard && (position === "bottom" || position === "center")) {
      return (
        <KeyboardAvoidingView
          behavior={Platform.OS === "ios" ? "padding" : "height"}
          style={styles.keyboardAvoidView}
        >
          {content}
        </KeyboardAvoidingView>
      );
    }

    return content;
  };

  return (
    <RNModal
      visible={visible}
      transparent={true}
      animationType={animationType}
      onRequestClose={onClose}
    >
      <View
        style={[
          styles.container,
          getContainerStyle(),
          { backgroundColor: `rgba(0, 0, 0, ${backdropOpacity})` },
        ]}
      >
        {closeOnBackdropPress ? (
          <TouchableOpacity
            style={styles.backdrop}
            activeOpacity={1}
            onPress={onClose}
          >
            {renderContent()}
          </TouchableOpacity>
        ) : (
          renderContent()
        )}
      </View>
    </RNModal>
  );
};

const { width, height } = Dimensions.get("window");

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  containerCenter: {
    justifyContent: "center",
    alignItems: "center",
  },
  containerTop: {
    justifyContent: "flex-start",
    alignItems: "center",
  },
  containerBottom: {
    justifyContent: "flex-end",
    alignItems: "center",
  },
  backdrop: {
    flex: 1,
    width: "100%",
    alignItems: "center",
    justifyContent: "flex-end",
  },
  content: {
    maxHeight: height * 0.85,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    padding: 16,
  },
  contentTop: {
    width: width,
    alignSelf: "flex-start",
  },
  contentBottom: {
    width: width,
    alignSelf: "flex-end",
  },
  keyboardAvoidView: {
    width: "100%",
    justifyContent: "flex-end",
  },
});

export default Modal;
